<template>
	<view class="h-150px mt-40px color-white flex flex-y-center" :class="isBg?'orderCount':''">
		<view class="self-start">
			<view>{{title}}</view>
			<view class="text-60px mt-20px">{{count}}</view>
		</view>
		<uv-line v-if="isExtra" direction="col" length="80%" margin='0 30rpx'></uv-line>
		<view v-if="isExtra" class="self-start flex-1">
			<slot></slot>
		</view>
	</view>
</template>

<script setup name="BigCountNum">
	import {
		computed
	} from 'vue';

	const props = defineProps({
		title: {
			type: String,
			default: ""
		},
		count: {
			type: [String, Number],
			default: ""
		},
		isExtra: {
			type: Boolean, // 额外标题 必须在父组件传入true 才可以展示
			default: false
		},
		isBg: {
			type: Boolean, // 背景
			default: true
		},
	})
</script>

<style lang="scss">
	.orderCount {
		background: url(https://i.postimg.cc/MZdHsYdd/pngsucai.png) calc(100% + 30px) -15px no-repeat;
		background-size: 250rpx 250rpx;
	}
</style>